<template>
    <view class="container">
        <view class="section">
            <navi-title :title="title" :count="config.length" />
            <view class="section-content">
                <detail-navi-card
                    v-for="(c, index) in config"
                    :key="index"
                    :icon="c.icon"
                    :title="c.title"
                    :componentsPath="c.componentsPath"
                    :desc="c.desc"
                />
            </view>
        </view>
    </view>
</template>

<script lang="ts">
import Vue from "vue"
import DetailNaviCard from "./detail-navi-card.vue"
import NaviTitle from "./navi-title.vue"

export default Vue.extend({
    props: {
        config: Array,
        title: String,
    },
    components: {
        DetailNaviCard,
        NaviTitle,
    },
})
</script>

<style scoped>
.container {
    min-height: 100vh;
    min-width: 100vw;
    box-sizing: border-box;
}

.section {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8rpx 8rpx 0 0;
    padding-bottom: 100rpx;
    border-top: 20rpx solid #f7f7f7;
}

.section-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
</style>